/**
 * WordPress Spider Monitor - 蜘蛛列表标签页切换功能
 * 实现单页应用内的标签页切换
 */

(function($) {
    'use strict';
    
    // 标签页配置
    const tabs = {
        'spider-list': {
            title: '蜘蛛清单',
            content: '.spider-list-section',
            loader: 'loadSpiderList'
        },
        'ip-segments': {
            title: '蜘蛛IP段',
            content: '.ip-segments-section',
            loader: 'loadIpSegments'
        },
        'fake-spiders': {
            title: '疑似伪蜘蛛',
            content: '.fake-spiders-section',
            loader: 'loadFakeSpiders'
        },
        'block-rules': {
            title: '蜘蛛拦截',
            content: '.block-rules-section',
            loader: 'loadBlockRules'
        }
    };
    
    let currentTab = 'spider-list';
    
    // 初始化标签页功能
    function initSpiderTabs() {
        console.log('初始化蜘蛛列表标签页功能');
        
        // 绑定标签页点击事件
        bindTabEvents();
        
        // 初始化当前标签页
        showTab(currentTab);
    }
    
    // 绑定标签页事件
    function bindTabEvents() {
        $(document).on('click', '.spider-tab-button', function(e) {
            e.preventDefault();
            
            const tabId = $(this).data('tab');
            if (tabId && tabs[tabId]) {
                showTab(tabId);
            }
        });
    }
    
    // 显示指定标签页
    function showTab(tabId) {
        if (!tabs[tabId]) {
            console.error('未知标签页:', tabId);
            return;
        }
        
        console.log('切换到标签页:', tabId);
        
        // 更新当前标签页
        currentTab = tabId;
        
        // 更新标签页按钮状态
        updateTabButtons(tabId);
        
        // 显示标签页内容
        showTabContent(tabId);
        
        // 加载标签页数据
        loadTabData(tabId);
    }
    
    // 更新标签页按钮状态
    function updateTabButtons(activeTabId) {
        $('.spider-tab-button').removeClass('active');
        $(`.spider-tab-button[data-tab="${activeTabId}"]`).addClass('active');
    }
    
    // 显示标签页内容
    function showTabContent(tabId) {
        // 隐藏所有标签页内容
        Object.keys(tabs).forEach(function(key) {
            $(tabs[key].content).hide();
        });
        
        // 显示当前标签页内容
        $(tabs[tabId].content).show();
        
        // 隐藏全局加载状态
        $('#spider-content-area .spa-loading').hide();
        $('.spa-loading').hide();
    }
    
    // 加载标签页数据
    function loadTabData(tabId) {
        const tab = tabs[tabId];
        if (!tab || !tab.loader) {
            return;
        }
        
        // 检查加载函数是否存在
        if (typeof window[tab.loader] === 'function') {
            try {
                window[tab.loader]();
            } catch (e) {
                console.error('加载标签页数据失败:', tabId, e);
            }
        } else {
            console.warn('加载函数不存在:', tab.loader);
        }
    }
    
    // 创建标签页导航HTML
    function createTabNavigation() {
        let html = '<div class="spider-tabs-navigation">';
        html += '<div class="spider-tabs-wrapper">';
        
        Object.keys(tabs).forEach(function(tabId) {
            const tab = tabs[tabId];
            const isActive = tabId === currentTab ? ' active' : '';
            
            html += `<button class="spider-tab-button${isActive}" data-tab="${tabId}">`;
            html += tab.title;
            html += '</button>';
        });
        
        html += '</div>';
        html += '</div>';
        
        return html;
    }
    
    // 初始化标签页内容结构
    function initTabContent() {
        // 检查是否已经有标签页导航
        if ($('.spider-tabs-navigation').length === 0) {
            // 在页面标题后插入标签页导航
            $('.wrap h1').after(createTabNavigation());
        }
        
        // 确保所有标签页内容都存在
        Object.keys(tabs).forEach(function(tabId) {
            const tab = tabs[tabId];
            if ($(tab.content).length === 0) {
                // 创建标签页内容容器
                const contentHtml = `<div class="${tab.content.substring(1)}" style="display: none;">
                    <div class="tab-loading">
                        <div class="spinner is-active"></div>
                        <p>加载中...</p>
                    </div>
                </div>`;
                $('.tab-content').append(contentHtml);
            }
        });
    }
    
    // 公共API
    window.SpiderTabs = {
        showTab: showTab,
        getCurrentTab: () => currentTab,
        init: initSpiderTabs,
        createNavigation: createTabNavigation,
        initContent: initTabContent
    };
    
    // 页面加载完成后初始化
    $(document).ready(function() {
        // 检查是否在蜘蛛列表页面
        if ($('.spider-list-section').length > 0 || $('#spider-content-area').length > 0) {
            initTabContent();
            initSpiderTabs();
        }
    });
    
    // 在SPA模式下，通过事件触发初始化
    window.addEventListener('spiderPageLoaded', function(event) {
        if (event.detail.route && event.detail.route.title === '蜘蛛列表') {
            setTimeout(function() {
                initTabContent();
                initSpiderTabs();
            }, 100);
        }
    });
    
})(jQuery);
